import { Button, Modal, message, Table } from 'antd';
//引入UI组件
import { ExclamationCircleOutlined } from "@ant-design/icons";
import { useState } from "react";
import { delMenu } from "../../request/api";
// /创建类组件
function App(props) {
    const { getMenuList } = props;
    let [newId, setId] = useState(0);
    // 分封装一个编辑事件
    const edit = (id) => {
        props.edit(id)
    }
    // 封装一个删除事件
    const del = (id) => {
        setDel(true);
        setId(id)
    }
    const columns = [
        {
            title: '菜单编号',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '菜单名称',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '上级菜单',
            dataIndex: 'pid',
            key: 'pid',
        },
        {
            title: '菜单图标',
            dataIndex: 'icon',
            key: 'icon',
        },
        {
            title: '菜单地址',
            dataIndex: 'url',
            key: 'irl',
        },
        {
            title: '状态',
            dataIndex: "status",
            key: "status",
            render(text, record) {
                return <Button danger size="small">
                    {record.status == 1 ? "正常" : "禁用"}
                </Button>
            }
        },
        {
            title: '操作',
            render(next,record) {
                return (
                    <div>
                        <Button type="primary" size="small" onClick={() => edit(record.id)}>编辑</Button>
                        <Button danger size="small" onClick={() => del(record.id)}>删除</Button>
                    </div>
                )
            }
        },
    ];

    // 弹框逻辑
    const [delTip, setDel] = useState(false)

    const hideModal = () => {
        setDel(false)
    }
    // 确认删除接口
    const confrimDel = () => {
        // 调用删除接口
        delMenu({ id: newId }).then((res) => {
            if (res.code == 200) {
                // 重新触发接口
                getMenuList();
                hideModal();
                message.success(res.msg)
            } else {
                message.error(res.msg)
            }
        })
    }
    return (
        <div>
            {/* <h1>列表组件</h1> */}
            <div>
                <Table
                    rowKey="id"
                    pagination={false}
                    dataSource={props.menulist}
                    columns={columns}
                    bordered={true} 
                />
                <Modal
                    title="警告信息"
                    visible={delTip}
                    onOk={confrimDel}
                    onCancel={hideModal}
                    okText="确认"
                    cancelText="取消"
                >
                    <p>
                        <ExclamationCircleOutlined />
                        你确定要删除吗？？？？
                    </p>
                </Modal>
            </div>
        </div>
    )
}
export default App